<template>
  <div>
    <div v-if="shows" style="background: #fff;width:350px;margin-right:150px;">
      <div class="aces">
        <div class="aces_title" style="display:felx;">
          <div>ACES</div>
          <div>{{aces_a.ace_num}}</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_one" :style="{'width':'100%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>双误</div>
          <div>{{aces_a.double_num}}</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_one" :style="{'width': aces_a.double_num +'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>一发成功率</div>
          <div>{{aces_a.first_send_win_a}}/{{aces_a.first_send_total_a}}({{aces_a.first_send_success}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_one" :style="{'width':''+(aces_a.first_send_success)+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>一发得分率</div>
          <div>{{aces_a.first_send_goal_a}}/{{aces_a.first_send_win_a}}({{aces_a.first_send_score}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_one" :style="{'width':''+aces_a.first_send_score+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>二发成功率</div>
          <div>{{aces_a.second_send_win_a}}/{{aces_a.second_send_total_a}}({{aces_a.second_send_success}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_one" :style="{'width':''+aces_a.second_send_success+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>二发得分率</div>
          <div>{{aces_a.second_send_goal_a}}/{{aces_a.second_send_win_a}}({{aces_a.second_send_score}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_one" :style="{'width':''+aces_a.second_send_score+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>发球得分率</div>
          <div>{{aces_a.first_send_goal_a+aces_a.second_send_goal_a}}/{{aces_a.first_send_win_a+aces_a.second_send_total_a}}({{aces_a.serve_score}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_one" :style="{'width':''+aces_a.serve_score+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>接发球得分率</div>
          <div>{{aces_a.first_send_win_b-aces_a.first_send_goal_b+aces_a.second_send_win_b-aces_a.second_send_goal_b}}/{{aces_a.first_send_win_a+aces_a.second_send_total_a}}({{aces_a.catch_score}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_one" :style="{'width':''+aces_a.catch_score+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>挽回破发点</div>
          <div>{{aces_a.retrieve_game_point_a}}/{{aces_a.game_point_b+aces_a.retrieve_game_point_a}}({{aces_a.save_game_point}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_one" :style="{'width':''+aces_a.save_game_point+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>成功破发</div>
          <div>{{aces_a.game_point_a}}/{{aces_a.game_point_a+aces_a.retrieve_game_point_b}}({{aces_a.success_game_point}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_one" :style="{'width':''+aces_a.success_game_point+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>一区得分率</div>
          <div>{{aces_a.first_area_goal_a + aces_a.first_area_total_b - aces_a.first_area_goal_b}}/{{aces_a.first_area_total_a + aces_a.first_area_total_b}}({{aces_a.first_area_score}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_one" :style="{'width':''+aces_a.first_area_score+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>二区得分率</div>
          <div>{{aces_a.second_area_goal_a + aces_a.second_area_total_b - aces_a.second_area_goal_b}}/{{aces_a.second_area_total_a + aces_a.second_area_total_b}}({{aces_a.second_area_score}}%)</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_one" :style="{'width':''+aces_a.second_area_score+'%'}"></div>
          </div>
        </div>
      </div>

      <div class="aces">
        <div class="aces_title">
          <div>总得分</div>
          <div>{{aces_a.total_score}}</div>
        </div>
        <div class="color">
          <div class="color_left">
            <div class="color_one" :style="{'width':'100%'}"></div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="!shows">暂无信息</div>
  </div>
</template>
<script>
export default {
  props: {
    aces_a: Object,
    shows: Boolean
  },
};
</script>
<style lang="less" scoped>
.color_one {
  position: relative;
}
.color_one:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 12px;
  background: #42b574;
  animation: progress 1s;
  -moz-animation: progress 1s;
  -webkit-animation: progress 1s;
  -o-animation: progress 1s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}

@keyframes progress {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@-moz-keyframes progress {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@-webkit-keyframes progress {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@-o-keyframes progress {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}
.name {
  display: flex;
  justify-content: space-between;
  margin: 0.28rem 0 0.34rem;
  padding: 0 0.2rem;
  color: #259b24;

  .disk {
    width: 70%;
    margin: auto;

    span {
      padding: 0 0.1rem;
      margin: 0 0.1rem;
      box-sizing: border-box;
      border: 1px #fff solid;
    }

    .actives {
      border: 1px #259b24 solid;
      box-sizing: border-box;
    }
  }
}

.aces {
  margin-bottom: 12px;

  .aces_title {
    padding: 0 0.2rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.1rem;
  }

  .color {
    display: flex;
    justify-content: space-between;
    height: 12px;
    background: #dddcdc;

    .color_left {
      width: 100%;
      .color_two {
        height: 100%;
        background: #c0e6d1;
      }
      .color_one {
        height: 100%;
        // background: #42b574;
      }
    }

    .color_right {
      display: flex;
      justify-content: flex-start;
      width: 50%;

      .color_two {
        height: 100%;
        background: #c0e6d1;
      }

      .color_one {
        height: 100%;
        background: #42b574;
      }
    }
  }
}
</style>
